---
import { BsSoundwave } from 'react-icons/bs/index';

import { Container } from './container';

import { count as soundCount } from '@/lib/sounds';

const count = soundCount();
---

<div class="hero">
  <Container>
    <div class="wrapper">
      <img
        alt="Faded Moodist Logo"
        aria-hidden="true"
        class="logo"
        height={45}
        src="/logo.svg"
        width={45}
      />

      <div class="title">
        <div class="left"></div>
        <h2>Moodist</h2>
        <div class="right"></div>
      </div>

      <h1 class="desc">Ambient sounds for focus and calm.</h1>

      <p class="sounds">
        <span aria-hidden="true" class="icon">
          <BsSoundwave />
        </span>
        <span>{count} Sounds</span>
      </p>
    </div>
  </Container>
</div>

<style>
  .hero {
    text-align: center;

    .wrapper {
      position: relative;
      padding: 100px 0 80px;
    }

    & .logo {
      display: block;
      width: 45px;
      margin: 0 auto 12px;
    }

    & .title {
      display: flex;
      column-gap: 15px;
      align-items: center;

      & div {
        flex-grow: 1;
        height: 1px;

        &.left {
          background: linear-gradient(
            90deg,
            transparent,
            transparent,
            var(--color-neutral-200),
            var(--color-neutral-300)
          );
        }

        &.right {
          background: linear-gradient(
            90deg,
            var(--color-neutral-300),
            var(--color-neutral-200),
            transparent,
            transparent
          );
        }
      }

      & h2 {
        font-family: var(--font-display);
        font-size: var(--font-2xlg);
        font-weight: 600;
      }
    }

    & .desc {
      margin-top: 5px;
      line-height: 1.6;
      color: var(--color-foreground-subtle);
    }

    & .sounds {
      position: relative;
      display: flex;
      column-gap: 8px;
      align-items: center;
      justify-content: center;
      width: max-content;
      height: 28px;
      padding-right: 12px;
      margin: 20px auto 0;
      font-size: var(--font-xsm);
      color: var(--color-foreground-subtle);
      background: linear-gradient(var(--color-neutral-100), transparent);
      border: 1px solid var(--color-neutral-200);
      border-radius: 100px;

      & .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 10px;
        color: var(--color-foreground);
        border-right: 1px solid var(--color-neutral-200);
        border-radius: 0 100px 100px 0;
      }

      &::before {
        position: absolute;
        top: -1px;
        left: 50%;
        width: 70%;
        height: 1px;
        content: '';
        background: linear-gradient(
          90deg,
          transparent,
          var(--color-neutral-400),
          transparent
        );
        transform: translateX(-50%);
      }
    }
  }
</style>
